<template>
  <div
    class="info_container"
    :style="{ paddingTop: isMobile == 'true' ? '0px' : '50px' }"
  >
    <div class="top_container" v-if="isMobile == 'false'">
      <div class="back_arrow">
        <van-icon name="arrow-left" size="0.6rem" @click="back()" />
      </div>
      <div class="top_title_container">
        <div class="title">{{ form.userName }}的{{ form.templateName }}</div>
      </div>
      <!-- <div class="search_container">
        <div class="search_item" style="color: #1989fa" @click="shareHandle()">
          <span>转发</span>
          <van-icon name="share-o" size="0.4rem" color="#1989fa" />
        </div>
      </div> -->
    </div>
    <div class="content_container">
      <div class="user_info">
        <img :src="form.img" alt="" />
        <div class="info">
          <div class="name">{{ form.userName }}</div>
          <div class="time">{{ form.updateTime }}</div>
        </div>
        <div class="share">
          <span>转发</span>
          <van-icon name="share-o" size="0.4rem" color="#1989fa" />
        </div>
      </div>
      <div class="field_container">
        <div class="field_item" v-for="(item, index) in fields" :key="index">
          <div class="item_label">{{ item.key }}:</div>
          <div class="item_content">
            <van-field
              v-model="item.content"
              autosize
              rows="1"
              type="textarea"
              readonly
              v-if="item.type != 8 && item.type != 9 && item.content"
            />
            <div class="img_list" v-if="item.type == 8">
              <div class="img_item" v-for="(item, index) in item.content">
                <img :src="item.url" alt="" :key="index" />
              </div>
            </div>
            <div class="file_list" v-if="item.type == 9">
              <a
                :href="item.url"
                v-for="(item, index) in item.content"
                :key="index"
                >{{ item.size }}</a
              >
            </div>
            <div class="empty" v-if="!item.content || item.content.length < 1">
              -
            </div>
          </div>
        </div>
      </div>
      <div class="read_container">
        <van-tabs
          v-model:active="readActive"
          @click-tab="onClickReadTab"
          shrink
        >
          <van-tab title="已读" name="1"></van-tab>
          <van-tab title="未读" name="0"></van-tab>
          <van-tab title="点赞" name="2"></van-tab>
        </van-tabs>
        <div class="read_list">
          <div class="read_item" v-for="(item, index) in readList" :key="index">
            <img :src="item.userImg" alt="" />
            <div class="text">{{ item.userName }}</div>
          </div>
        </div>
      </div>
      <div class="review_container">
        <div class="label">评论 {{ commentTotal }}</div>
        <!-- 评论列表 -->
        <div class="comment_list" v-if="commentList?.length > 0">
          <div class="item_container" v-for="item in commentList">
            <van-image
              width="1rem"
              height="1rem"
              radius="0.2rem"
              class="limg"
              :src="item.userImg"
              alt=""
            />
            <div class="item_content">
              <div class="name">{{ item.userName }}</div>
              <div class="new_text">
                <span class="comment_text">{{ item.context }}</span>
              </div>
              <div class="original_text" v-if="item.reply">
                <div class="line"></div>
                <div class="original_content">{{ item.reply }}</div>
              </div>
              <div class="item_time">
                <div class="time_label">{{ item.createTime }}</div>
                <div
                  v-if="item.userId != userId"
                  class="reply"
                  @click="replyHandle(item)"
                >
                  回复
                </div>
              </div>
            </div>
          </div>
          <div class="item_container" v-for="item in commentList">
            <van-image
              width="1rem"
              height="1rem"
              radius="0.2rem"
              class="limg"
              :src="item.userImg"
              alt=""
            />
            <div class="item_content">
              <div class="name">{{ item.userName }}</div>
              <div class="new_text">
                <span class="comment_text">{{ item.context }}</span>
              </div>
              <div class="original_text" v-if="item.reply">
                <div class="line"></div>
                <div class="original_content">{{ item.reply }}</div>
              </div>
              <div class="item_time">
                <div class="time_label">{{ item.createTime }}</div>
                <div
                  v-if="item.userId != userId"
                  class="reply"
                  @click="replyHandle(item)"
                >
                  回复
                </div>
              </div>
            </div>
          </div>
          <div class="item_container" v-for="item in commentList">
            <van-image
              width="1rem"
              height="1rem"
              radius="0.2rem"
              class="limg"
              :src="item.userImg"
              alt=""
            />
            <div class="item_content">
              <div class="name">{{ item.userName }}</div>
              <div class="new_text">
                <span class="comment_text">{{ item.context }}</span>
              </div>
              <div class="original_text" v-if="item.reply">
                <div class="line"></div>
                <div class="original_content">{{ item.reply }}</div>
              </div>
              <div class="item_time">
                <div class="time_label">{{ item.createTime }}</div>
                <div
                  v-if="item.userId != userId"
                  class="reply"
                  @click="replyHandle(item)"
                >
                  回复
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="plar" v-else>暂无评论...</div>
      </div>
    </div>
    <div class="bottom_container">
      <div class="tab_item">
        <van-field
          v-model="commentVlaue"
          type="textarea"
          @update:model-value="valueChange"
          @clear="close"
          clearable
          :placeholder="commentPlaceholder"
          ref="focusInput"
          style="width: 80%"
        />
        <van-button
          :disabled="!commentVlaue"
          type="primary"
          size="small"
          @click="sendHandle()"
          >{{ textContent ? "回复" : "评论" }}</van-button
        >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          name="dianzan"
          size="0.6rem"
          v-if="!upvote"
          @click="updateGood(1)"
        />
        <van-icon
          class="iconfont"
          class-prefix="icon"
          name="dianzan_kuai"
          size="0.6rem"
          color="#1989fa"
          @click="updateGood(0)"
          v-else
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  GetLogRecord,
  GetReadList,
  UpdateRead,
  GetGoodList,
  UpdateGood,
  GetGoodFlag,
  AddComment,
  GetCommentList,
} from "@/api/log";
import { useRouter, useRoute } from "vue-router";
import { Dialog, Toast } from "vant";
import { Local } from "@/utils/storage";
import * as dd from "dingtalk-jsapi";
const router = useRouter();
const route = useRoute();
const back = () => {
  localStorage.setItem("logTab", 0);
  localStorage.setItem("readLogTab", "1");
  router.push("log");
};
const readActive = ref("1");
const isMobile = ref(false);
onMounted(() => {
  isMobile.value = localStorage.getItem("isMobile");
  if (route.query.id) {
    currentId.value = route.query.id;
    updateRead();
    getGoodFlag();
    getInfo();
    getCommentList();
  }
});
//转发
const shareHandle = () => {
  dd.ready(function () {
    dd.biz.navigation.setRight({
      show: true,
      control: true,
      text: "...", //空字符串表示显示默认文本
      onSuccess: function (result) {
        dd.biz.util.share({
          type: 0, //分享类型，0:全部组件 默认； 1:只能分享到钉钉；2:不能分享，只有刷新按钮
          url: "http://124.71.99.70:5869/#/readLogInfo?id=" + currentId.value,
          content: "分享的描述",
          title: "分享的名字！",
          image: "http://applet.atptest.com/FWq2MX071730772611368.png",
          onSuccess: function () {
            console.log("分享成功");
          },
          onFail: function (err) {
            console.log("分享失败", err);
          },
        });
      },
      onFail: function (err) {},
    });
  });
};
const form = ref({});
const fields = ref([]);
const currentId = ref(null);
const userId = ref("");
userId.value = Local.get("userId");
const getInfo = async () => {
  const res = await GetLogRecord({ id: currentId.value });
  if (res.code == 200) {
    form.value = res.data;
    commentPlaceholder.value = `评论${form.value.userName}的日志`;
    fields.value = res.data.fields;
    fields.value.forEach((item) => {
      item.value = JSON.parse(item.value);
      item.content = JSON.parse(item.content);
    });
  }
};
//点击标签
const onClickReadTab = (e) => {
  readActive.value = e.name;
  if (readActive.value == "2") {
    getGoodList();
  } else {
    getReadList();
  }
};
//已读未读
const readList = ref([]);
const updateRead = async () => {
  let req = {
    id: currentId.value,
    userId: userId.value,
  };
  const res = await UpdateRead(req);
  if (res.code == 200) {
    getReadList();
  }
};
const getReadList = async () => {
  let req = {
    id: currentId.value,
    state: Number(readActive.value),
  };
  const res = await GetReadList(req);
  readList.value = res.data ? res.data : [];
};

//点赞
const upvote = ref(false);
const getGoodList = async () => {
  let req = {
    id: currentId.value,
  };
  const res = await GetGoodList(req);
  readList.value = res.data ? res.data : [];
};
const updateGood = async (state) => {
  let req = {
    id: currentId.value,
    userId: userId.value,
    state: state,
  };
  const res = await UpdateGood(req);
  if (res.code == 200) {
    upvote.value = true;
    readActive.value = "2";
    getGoodFlag();
    getGoodList();
  }
};
//判断是否已点赞
const getGoodFlag = async () => {
  let req = {
    id: currentId.value,
    userId: userId.value,
  };
  const res = await GetGoodFlag(req);
  if (res.code == 200) {
    if (res.data) {
      upvote.value = true;
    } else {
      upvote.value = false;
    }
  }
};
//评论、回复
const focusInput = ref();
let commentVlaue = ref("");
let commentUser = ref();
let isRecover = ref(false);
const textContent = ref("");
let commentTotal = ref(0);
let commentList = ref([]);
//回复
const replyHandle = (row) => {
  isRecover.value = true;
  setTimeout(() => {
    focusInput.value.focus();
  }, 300);
  commentUser.value = row.userName;
  commentPlaceholder.value = "";
  textContent.value = row.context;
  commentVlaue.value = `回复：@${commentUser.value}`;
};
// 获取评论列表
const getCommentList = async () => {
  let res = await GetCommentList({ id: currentId.value });
  commentList.value = res.data;
  commentTotal.value = res.data?.length;
};
// 获取评论数据详情
const commentPlaceholder = ref("");
// 值发生改变时
const valueChange = (e) => {
  if (!e) {
    textContent.value = "";
    commentPlaceholder.value = `评论${form.value.userName}的日志`;
  }
};

//发送
const sendHandle = async () => {
  let data = {
    rId: currentId.value,
    context: commentVlaue.value,
    userId: userId.value,
    reply: textContent.value,
  };
  await AddComment(data);
  Toast("发送成功");
  getCommentList();
  commentVlaue.value = "";
  textContent.value = "";
  commentPlaceholder.value = `评论${form.value.userName}的日志`;
};

const delReply = () => {
  Dialog.confirm({
    title: "确定删除该评论吗？",
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
};
</script>
<style lang="scss" scoped>
@import "../base.scss";

.info_container {
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  .content_container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    padding: 20px;
    padding-bottom: 100px;
    box-sizing: border-box;
    .user_info {
      display: flex;
      align-items: center;
      position: relative;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 5px;
      }
      .info {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 0.5rem;
          font-weight: bold;
        }
        .time {
          font-size: 0.3rem;
          color: #bebebe;
        }
      }
      .share{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0.4rem;
        margin-left: 20px;
        color: #1989fa;
      }
    }
    .field_container {
      margin-top: 10px;
      .field_item {
        .item_label {
          font-size: 0.4rem;
          font-weight: bold;
        }
        .item_content {
          font-size: 0.4rem;
          color: #888888;
          line-height: 26px;
          .van-cell {
            padding-left: 0;
            box-sizing: border-box;
          }
          .img_list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .img_item {
              margin: 10px 10px 10px 0;
              img {
                width: 2rem;
                height: auto;
              }
            }
          }
          .file_list {
            margin-bottom: 10px;
            a {
              display: inline-block;
              margin: 10px 0;
            }
          }
          .empty {
            font-size: 0.5rem;
            font-weight: bold;
          }
        }
      }
    }
    .read_container {
      border-top: 2px solid #f8f8f8;
      :deep(.van-tab--shrink) {
        padding: 0 1rem;
        box-sizing: border-box;
      }
      :deep(.van-tabs__line) {
        background-color: #0083fd;
      }
      .read_list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .read_item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 0.3rem;
          margin: 10px;
          img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 5px;
          }
          .text {
            margin-top: 5px;
          }
        }
      }
    }
    .review_container {
      margin-top: 20px;
      .label {
        font-size: 0.4rem;
        font-weight: bold;
      }
      .comment_list {
        width: 100%;
        margin-top: 10px;
        .comment_label {
          font-size: 14px;
          margin: 10px 0;
        }
        .item_container {
          display: flex;
          .item_content {
            margin-left: 15px;
            font-size: 14px;
            .name {
              color: #a2a3a5;
            }
            .new_text {
              margin: 6px 0;
              .recover_label {
                margin-right: 5px;
              }
            }
            .original_text {
              color: #c8c8c9;
              display: flex;
              align-items: center;
              .line {
                width: 1px;
                height: 20px;
                background-color: #c8c8c9;
                margin-right: 10px;
              }
            }
            .item_time {
              display: flex;
              align-items: center;
              color: #c8c8c9;
              margin: 10px 0;
              .time_label {
                font-size: 12px;
                display: flex;
                align-items: center;
                margin-top: 3px;
              }
              .reply {
                font-size: 14px;
                color: #308bde;
                margin-left: 10px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .plar {
        width: 100%;
        text-align: center;
        font-size: 0.4rem;
        color: #555;
        font-weight: 700;
        margin-top: 10px;
      }
    }
  }
  .bottom_container {
    width: 100%;
    padding: 40px 0;
    padding-right: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    .tab_item {
      width: 100%;
      font-size: 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
  }
  .upvote_container {
    width: 50px;
    height: 50px;
    border: 1px solid red;
    z-index: 2002;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .reply_container {
    .review_content {
      font-size: 0.3rem;
      margin: 20px 0 10px 0;
    }
    .reply_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
